<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子父传值</title>
	    <script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="todo">
		<div>
		<input type="text" v-model="inputValue" />
		<button @click="pushclick">添加</button>
		</div>
		<ul>
			<todo-item v-bind:contents="item"
				       v-bind:index="index"
				       v-for="(item,index) in list"
				       @delete="handeitem"
				
				></todo-item>
		</ul>
		</div>
		<script>
			//组件自己事件绑定在自己的template中
			var TodoItem = {
				props:['contents','index'],  //从自己跟父级通信,props:外部接收的数据,父子通信
				template:"<li @click='thisitem'>{{contents}}</li>",
				methods:{
					thisitem:function(){
                         this.$emit("delete",this.index)	;			
					}
				}
			}
			
			var todolist = new Vue({
				el:"#todo",
				components:{
                 	TodoItem:TodoItem
                },
				data:{
					inputValue:"",
					list:[]
				},
                 methods:{
                 	pushclick:function(){
                      this.list.push(this.inputValue)	//点击后向list数组内传入inputValue值
                      this.inputValue = " "
                 	},
                 	handeitem:function(index){
                 		this.list.splice(index,1)
                 	}
                 }
			})
			 //$.emit 子组件可以使用 $emit 触发父组件的自定义事件,也就是子父级通信
			 //父组件给子组件传值使用 v-bind然后 用 props接收数据时和v-bind绑定即可
		</script>
	</body>
</html>